<template>
	<div class="my-detail">
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(item, i) in imgList"><van-image :src="item"></van-image></van-swipe-item>
		</van-swipe>

		<van-cell title="商品编号" :value="product.id" />
		<van-cell title="商品名称" :value="product.name" />
		<van-cell title="商品标题" :value="product.title" />
		<van-cell title="商品规格" :value="product.spec" />
		<van-cell title="硬盘" :value="product.disk" />
		<van-cell title="CPU" :value="product.cpu" />
		<van-cell title="内存" :value="product.memory" />
		<van-cell title="显卡" :value="product.video_card" />
		<van-cell title="分辨率" :value="product.resolution" />
		<van-cell title="上架时间" :value="product.shelf_time" />
		<van-cell title="单价" :value="product.price" />

		<!-- 商品购买区域 -->
		<van-cell>
			<template #default>
				<div class="count-buy">
					<div>购买数量</div>
					<van-stepper v-model="count" integer />
					<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车</van-button>
				</div>
			</template>
		</van-cell>

		<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
	</div>
</template>
<script>
import dayjs from 'dayjs'; //导入日期格式化模块

// 导入封装的接口
import { getProductDetailByIdAPI } from '@/api/product.js';
import { addCartAPI } from '@/api/cart.js';
export default {
	name: 'ProductDetail',
	data() {
		return {
			product: {},
			 imgList: [],
			count: 0
		};
	},
	created() {		
		const id = this.$route.query.id;
		//根据id去后端获取对应商品的详细数据
		//使用封装后的接口
		getProductDetailByIdAPI(id).then(result => {
			console.log(result);
			this.product = result.data;
			//上架时间格式化
			this.product.shelf_time = dayjs(this.product.shelf_time).format('YYYY-MM-DD HH:mm:ss');

			//获取轮播图片数组
			this.product.picList.forEach(item => {
				this.imgList.push(this.APIDomainName + item.md);
			});
		});
	},
	methods: {
		onBack() {
			this.$router.back();
		},

		//处理添加购物车
		onClickAddShopcart() {
		 let params = {
				product_id: this.product.id,
				count: this.count
			};
			//2.使用封装后的接口,注意：接口有参数
			addCartAPI(params)
				.then(result => {
		 		this.$toast(result.msg);
				})
				.catch(() => {});
		}
	}
};
</script>

<style lang="less" scoped>
.my-detail {
	background-color: #ff7f27;
}

.count-buy {
	display: flex;
	flex-direction: row;
	margin: 10px 0px;
	justify-content: space-between;
}
</style>
